<template>
	<view>
		<topbar title="发布悬赏" jt_c="2" background="background:#E23C63;color:#fff;"></topbar>
		<view class="content">
			<view class="xs_box">
				<view class="title" style="margin-bottom: 24rpx;">选择标签</view>
				<view class="dis_f_l_c dis_f_w">
					<view v-for="(item,index) in je_list" :key="item.id" @click="selectColor(index,item)">
						<view class="jin_e dis_f_c_c" :class="[ item.selected ? 'jin_e2' : 'jin_e']">{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="xs_box">
				<view class="dis_f_l_c" style="margin-bottom: 24rpx;">
					<view class="title" style="margin-right: 74rpx;">任务名称</view>
					<u-input v-model="rw_name" :border="true" height="76" placeholder="请输入任务名称"></u-input>
				</view>
				<view class="dis_f_l_c" style="margin-bottom: 24rpx;">
					<view class="title" style="margin-right: 74rpx;">悬赏需求</view>
					<u-input v-model="xs_xq" :border="true" height="76" placeholder="请输入悬赏需求"></u-input>
				</view>
			</view>
			<view class="xs_box">
				<view class="dis_f_l_c" style="margin-bottom: 24rpx;">
					<view class="title dis_f_l_c" style="margin-right: 55.62rpx;">
						<view>提交限时</view>
						<view style="color: #E23C63;margin-left: 12rpx;">*</view>
					</view>
					<u-input :disabled="true" type="select " v-model="tj_time" :border="true" height="76" @click="show = true"
						placeholder="请选择提交限时"></u-input>
					<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback">
					</u-action-sheet>
				</view>
				<view class="dis_f_l_c" style="margin-bottom: 24rpx;">
					<view class="title dis_f_l_c" style="margin-right: 55.62rpx;">
						<view>审核限时</view>
						<view style="color: #E23C63;margin-left: 12rpx;">*</view>
					</view>
					<u-input :disabled="true" type="select " v-model="tj_time2" :border="true" height="76" @click="show2 = true"
						placeholder="请选择审核限时"></u-input>
					<u-action-sheet :list="actionSheetList2" v-model="show2" @click="actionSheetCallback2">
					</u-action-sheet>
				</view>
				<view class="r_text">若未按时审核，将自动审核</view>
				<view class="dis_f_l_c" style="margin-bottom: 24rpx;">
					<view class="title dis_f_l_c" style="margin-right: 55.62rpx;">
						<view>领取次数</view>
						<view style="color: #E23C63;margin-left: 12rpx;">*</view>
					</view>
					<u-radio-group v-model="value">
						<u-radio label-size="22" @change="radioChange(item.id)" v-for="(item, index) in list" :key="index"
							:name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="xs_box">
				<view class="dis_f_l_c" style="margin-bottom: 24rpx;">
					<view class="title dis_f_l_c" style="margin-right: 55.62rpx;">
						<view>需求人数</view>
						<view style="color: #E23C63;margin-left: 12rpx;">*</view>
					</view>
					<u-input v-model="xq_rs" :border="true" height="76" placeholder="请输入需求人数"></u-input>
				</view>
				<view class="dis_f_l_c" style="margin-bottom: 24rpx;">
					<view class="title dis_f_l_c" style="margin-right: 55.62rpx;">
						<view>任务金额</view>
						<view style="color: #E23C63;margin-left: 12rpx;">*</view>
					</view>
					<u-input v-model="rw_je" type="number" :border="true" height="76" :placeholder="min_task_money_str"></u-input>
				</view>
				<view class="dis_f_l_c" style="margin-bottom: 24rpx;">
					<view class="title dis_f_l_c" style="margin-right: 55.62rpx;">
						<view>任务数量</view>
						<view style="color: #E23C63;margin-left: 12rpx;">*</view>
					</view>
					<u-input v-model="rw_num" type="number" :border="true" height="76" :placeholder="min_task_num_str"></u-input>
				</view>
			</view>
			<view class="xs_box">
				<view class="dis_f_sb_c" style="width: 100%;font-size: 28rpx;line-height: 40rpx;margin-bottom: 36rpx;">
					<view>预付赏金 + 手续费{{fee_money}}</view>
					<view>共计{{rw_num * rw_je}}元</view>
				</view>
				<view class="b_btn dis_f_c_c" @click="go_next">
					下一步（设置步骤）
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xq_rs:'',
				rw_je:'',
				rw_num:'',
				price:'0',
				lq_cs:'',
				list: [
					// {
					// 	name: '每人1次',
					// 	disabled: false
					// },
					// {
					// 	name: '每天1次',
					// 	disabled: false
					// },
					// {
					// 	name: '每人3次',
					// 	disabled: false
					// }
				],

				value: 'orange',
				je_list: [
					// {
					// 	name: 'APP下载',
					// 	id: 1,
					// 	selected: false
					// },
					// {
					// 	name: '抖音点赞',
					// 	id: 2,
					// 	selected: false
					// },
					// {
					// 	name: '发布评论',
					// 	id: 3,
					// 	selected: false
					// },
					// {
					// 	name: '其他',
					// 	id: 4,
					// 	selected: false
					// }
				],
				rw_name: '',
				biao_qian:'',
				tag_id:0,
				xs_xq: '',
				tj_time: '',
				show: false,
				tj_time2: '',
				show2: false,
				actionSheetList: [
					// {
					// 	text: '限时1小时之内'
					// },
					// {
					// 	text: '限时3小时之内'
					// },
					// {
					// 	text: '限时5小时之内'
					// }
				],
				actionSheetList2: [
					// {
					// 	text: '限时12小时之内审核'
					// },
					// {
					// 	text: '限时24小时之内审核'
					// },
					// {
					// 	text: '限时48小时之内审核'
					// }
				],
				sysconfig: [],
				submit_time_limit:'',
				examine_time_limit:'',
				min_task_num_str:'最少50单',
				min_task_num:0,
				min_task_money_str:'请输入任务金额',
				min_task_money:0,
				fee_money:'',
				user:[]
			};
		},
		onShow() {
			if (uni.getStorageSync('token') == '') {
				this.$.ti_shi('请先登录账号');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/login/login');
				}, 2000); 
			}
			this.$.ajax(1, 'post', 'index/getuser', {
				uid:uni.getStorageSync('uid'),
				token:uni.getStorageSync('token')
			}, (res) => {
				if(res.code == 1){
					this.user = res.userinfo
					//获取悬赏后台设置参数
					this.$.ajax(1, 'post', 'task/get_sysconfig', {
					}, (res) => {
						if(res.code == 1){
							this.min_task_num_str = '最少'+res.data.min_task_num+'单';
							this.min_task_num = res.data.min_task_num;
							this.min_task_money_str = '任务金额最小为'+res.data.min_task_money;
							this.min_task_money = res.data.min_task_money;
							console.log(this.user.isvip)
							if (this.user.isvip > 0) {
								console.log(111)
								this.fee_money = res.data.vip_add_task_fee+'%';
							}else{
								this.fee_money = res.data.add_task_fee+'%';
							}
						}else{
								this.$.ti_shi(res.msg);
							}
					})
				}else{
						this.$.ti_shi(res.msg);
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						}  
					}
			})
			
			//获取悬赏分类
			this.$.ajax(1, 'post', 'task/xuanshang_cate', {
			}, (res) => {
				if(res.code == 1){
					this.je_list = res.list
				}else{
						this.$.ti_shi(res.msg);
					}
			})
			//获取提交限时
			this.$.ajax(1, 'post', 'task/submin_length_time', {
			}, (res) => {
				if(res.code == 1){
					this.actionSheetList = res.data
				}else{
						this.$.ti_shi(res.msg);
					}
			})
			//获取审核限时
			this.$.ajax(1, 'post', 'task/examine_length_time', {
			}, (res) => {
				if(res.code == 1){
					this.actionSheetList2 = res.data
				}else{
						this.$.ti_shi(res.msg);
					}
			})
			//获取领取次数
			this.$.ajax(1, 'post', 'task/receive_num', {
			}, (res) => {
				if(res.code == 1){
					this.list = res.data
				}else{
						this.$.ti_shi(res.msg);
					}
			})
		},
		
		methods: {
			selectColor(index, item) {
				let that = this
				for (let items in that.je_list) { //这个循环的时候要用for in 来遍历 当前选中下标为true 其他的下标为false 避免多选
					that.je_list[items].selected = false;
					that.je_list[index].selected = true;
					that.biao_qian = that.je_list[index].name;
					that.tag_id = that.je_list[index].id;
				}
			},
			actionSheetCallback(index) {
				this.tj_time = this.actionSheetList[index].text;
				this.submit_time_limit = this.actionSheetList[index].length_time;
			},
			actionSheetCallback2(index) {
				this.tj_time2 = this.actionSheetList2[index].text;
				this.examine_time_limit = this.actionSheetList2[index].length_time;
			},
			radioChange(e) {
				this.lq_cs = e
			},
			go_next(){
				if(this.biao_qian == ''){
					this.$.ti_shi('请选择标签')
					return;
				}
				if(this.rw_name == ''){
					this.$.ti_shi('请输入任务名称')
					return;
				}
				if(this.xs_xq == ''){
					this.$.ti_shi('请输入悬赏需求')
					return;
				}
				if(this.tj_time == ''){
					this.$.ti_shi('请选择提交限时')
					return;
				}
				if(this.tj_time2 == ''){
					this.$.ti_shi('请选择审核限时')
					return;
				}
				if(this.lq_cs == ''){
					this.$.ti_shi('请选择领取次数')
					return;
				}
				if(this.xq_rs == ''){
					this.$.ti_shi('请输入需求人数')
					return;
				}
				if(this.rw_je == ''){
					this.$.ti_shi('请输入任务金额')
					return;
				}
				// if(this.rw_je < this.min_task_money){
				// 	this.$.ti_shi('任务金额最小为'+this.min_task_money)
				// 	return;
				// }
				if(this.rw_num == ''){
					this.$.ti_shi('请选择任务数量')
					return;
				}
				if(this.rw_num < this.min_task_num){
					this.$.ti_shi(this.min_task_num_str)
					return;
				}
				this.$.ajax(1, 'post', 'task/add_task', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
				
					tag_id:this.tag_id,
					title:this.rw_name,
					requirement:this.xs_xq,
					submit_time_limit:this.submit_time_limit,
					examine_time_limit:this.examine_time_limit,
					receive_num:this.lq_cs,
					need_num:this.xq_rs,
					task_money:this.rw_je,
					task_num:this.rw_num,
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.$.open('/pages/xuan_shang/part2?id='+res.id)
						// this.$.ti_shi(res.msg)
					}else{
						this.$.ti_shi(res.msg);
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						}  
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: calc(var(--status-bar-height) + 124rpx) 24rpx 0 24rpx;
		width: 100%;

		.xs_box {
			width: 100%;
			padding: 36rpx 24rpx;
			background-color: #fff;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			border-radius: 20rpx;
			margin-bottom: 12rpx;

			.title {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #222222;
			}
		}

		.jin_e {
			width: 122rpx;
			height: 62rpx;
			border: 2rpx solid #EEE;
			border-radius: 10rpx;
			color: #777777;
			font-size: 22rpx;
			line-height: 32rpx;
			margin-right: 24rpx;
			margin-bottom: 12rpx;
		}

		.jin_e2 {
			width: 122rpx;
			height: 62rpx;
			border: none;
			margin-bottom: 12rpx;
			background-color: #E23C63;
			border-radius: 10rpx;
			color: #fff;
			font-size: 22rpx;
			line-height: 32rpx;
		}

		.r_text {
			margin-top: 6rpx;
			font-size: 22rpx;
			line-height: 32rpx;
			color: #E23C63;
			padding-left: 210rpx;
			margin-bottom: 24rpx;
		}
		.b_btn{
			width: 100%;
			height: 78rpx;
			border-radius: 50rpx;
			color: #FFFFFF;
			background-color: #E23C63;
		}
	}
</style>
